import { useEffect, useState } from 'react'
import { useRoutes, useLocation, useNavigate } from "react-router-dom"
import router from './router'

import { message } from "antd"

// 去往登陆页面的组件
function ToLogin() {
  const navigateTo = useNavigate()
  // 加载完这个组件之后实现跳转
  useEffect(() => {
    navigateTo("/login")    
    message.warning("您还没有登录,请登录后再访问!");
  }, [])
  return <div></div>
}

// 去往首页的组件
function ToPage1() {  
  const navigateTo = useNavigate()
  // 加载完这个组件之后实现跳转
  useEffect(() => {
    navigateTo("/page1")
    message.warning("您已经登陆过了!")
  }, [])
  return <div></div>
}

// 手写封装
function BeforRouterEnter() { 
  const outlet = useRoutes(router)
  const location = useLocation()
  // 后台管理系统两种经典的跳转情况
  let token = localStorage.getItem("lege-react")
  if (location.pathname === "/login" && token) {
    return <ToPage1 />
  }
  if (location.pathname !== "/login" && !token) {
    return <ToLogin />
  }
  return outlet
}

function App() {
  const [count, setCount] = useState(0)
  const outlet = useRoutes(router)
  return (
    <div className="App">
      {/* <Link to="/home">Home</Link> |
      <Link to="/about">About</Link> |
      <Link to="/user">User</Link>  */}
      {/* 占位符组件 类似于窗口 用来展示组件的 有点像vue中的router-view*/}
      {/* <Outlet></Outlet> */}
      {/* {outlet} */}
      <BeforRouterEnter></BeforRouterEnter>
    </div>
  )
}

export default App